<template>
  <div class="icons">
    <div class="icon" v-for="item of iconList" :key="item.id">
      <div class="icon-img">
        <img class="icon-img-content" :src="item.url" alt="">
        <p class="icon-desc">{{item.content}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      iconList: [{
        id: '0001',
        url: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        content: '景点门票'
      }, {
        id: '0002',
        url: 'http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png',
        content: '本地娱乐'
      }, {
        id: '0003',
        url: 'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',
        content: '公园'
      }, {
        id: '0004',
        url: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
        content: '一日游'
      }, {
        id: '0005',
        url: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        content: '无锡必游'
      }, {
        id: '0006',
        url: 'https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
        content: '打卡圣地'
      }, {
        id: '0007',
        url: 'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
        content: '亲子游'
      }, {
        id: '0008',
        url: 'http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png',
        content: '赏秋色'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icons
    overflow hidden
    height 0
    padding-bottom 50%
    .icon
      position relative
      overflow hidden
      width 25%
      height 0
      float left
      padding-bottom 25%
      .icon-img
        position absolute
        top 0
        left 0
        right 0
        bottom .44rem
        box-sizing border-box
        padding .1rem
        .icon-img-content
          display block
          margin 0 auto
          height 100%
      .icon-desc
        text-align center
</style>
